<template>
  <div id="app">
    <h2 class="h2-title">vue和微信小程序的区别、比较</h2>
    <!-- <img :src="imgSrc" alt=""> -->
    <ul class="v_left_list">
      <li v-for="(item, i) in list" :class="{'active':active == i}" @click="activeNav(i)">
        <a v-bind:href="'#'+item.action">{{item.title}}</a>
      </li>
    </ul>
    <div class="container">
      <div id="action01" name="action01">
        <h3 class="padding">一、生命周期</h3>
        <p>vue生命周期图</p>
        <img class="v_img" src="./images/vue.png" alt="">
        <p>小程序生命周期图</p>
        <img class="v_img" src="./images/xcx.png" alt="">
        <p class="red">在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。</p>
      </div>
      <div id="action02" name="action02">
        <h3 class="padding">二、数据绑定</h3>
        <p>01、VUE:vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：，例：</p>
        <p v-text="imgTxt" class="red"></p>
        <img :src='imgSrc'/>
        <p>02、小程序：绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。例：</p>
        <p v-text="xcxTxt" class="red"></p>
      </div>
      <div id="action03" name="action03">
        <h3 class="padding">三、列表渲染</h3>
        <p>01、vue</p>
        <ul id="example-1">
          <li v-for="item in items">
            {{ item.message }}
          </li>
        </ul>
        <p>02、小程序</p>
        <p v-text="xcxList"></p>
      </div>
      <div id="action04" name="action04">
        <h3 class="padding">四、显示与隐藏元素</h3>
        <p>01、vue</p>
        <p>vue中，使用v-if 和v-show控制元素的显示和隐藏</p>
        <p>02、小程序</p>
        <p>使用wx-if和hidden控制元素的显示和隐藏</p>
      </div>
      <div id="action05" name="action05">
        <h3 class="padding">五、事件处理</h3>
        <p>01、vue：使用v-on:event绑定事件，或者使用@event绑定事件,例如</p>
        <button v-on:click="counter += 1">+ </button>
        <button v-on:click.stop="counter-=1">- </button>
        <p>{{counter}}</p>
        <p>02、小程序:全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件,例如：</p>
      </div>
       <div id="action06" name="action06">
        <h3 class="padding">六、数据双向绑定</h3>
        <h4 class="gre">1.设置值</h4>
        <p>01、vue：在vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变。</p>
        <p>02、小程序:this.setData({key:value})</p>
         <h4 class="gre">2.取值</h4>
         <p>vue中，通过this.reason取值</p>
         <p>小程序中，通过this.data.reason取值</p>
      </div>
       <div id="action07" name="action07">
        <h3 class="padding">七、绑定事件传参</h3>
        <p class="gre">vue</p>
        <button @click="say('明天不上班')">明天不上班</button>
        <p class="gre">小程序</p>
        <p>不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset.*的方式获取</p>
      </div>
      <div id="action08" name="action08">
        <h3 class="padding">父子组件通信</h3>
        <p class="gre">1.子组件使用</p>
        <p>编写子组件</p>
        <p>在子组件的json文件中，将该文件声明为组件</p>
        <p>在需要引入的父组件的json文件中，在usingComponents填写引入组件的组件名以及路径</p>
        <p>在父组件中，直接引入即可</p>
        <p class="gre">2.父子组件间通信</p>
      </div>
    </div>
    
  </div>
</template>
<script>
  export default {
    name: "app",
    data() {
      return {
        list: [
          { action: "action01", title: "一、生命周期" },
          { action: "action02", title: "二、数据绑定" },
          { action: "action03", title: "三、列表渲染" },
          { action: "action04", title: "四、显示与隐藏元素" },
          { action: "action05", title: "五、事件处理" }
        ],
        active: 0,
        imgTxt: "<img :src='imgSrc'/>",
        xcxTxt: "<image src='{{imgSrc}}'></image>",
        imgSrc: "http://static.wts9999.net/FILE/20180326/20180326161651783.jpg",
        xcxList: "<text wx:for='{{items}}'>{{item}}</text>",
        counter: 0,
        items: [{ message: "1" }, { message: "2" }]
      };
    },
    methods:{
      activeNav(i){
        console.log(this.active)
        this._data.active = i
      },
      say(txt){
        alert(txt)
      }
    },
    beforeCreate: function() {
      console.group("------beforeCreate创建前状态------");
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    created: function() {
      console.group("------created创建完毕状态------");
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    beforeMount: function() {
      console.group("------beforeMount挂载前状态------");
      console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    mounted: function() {
      console.group("------mounted 挂载结束状态------");
      console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    beforeUpdate: function() {
      console.group("beforeUpdate 更新前状态===============》");
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    updated: function() {
      console.group("updated 更新完成状态===============》");
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    beforeDestroy: function() {
      console.group("beforeDestroy 销毁前状态===============》");
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    destroyed: function() {
      console.group("destroyed 销毁完成状态===============》");
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    }
  };
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}
.h2-title {
  text-align: center;
}
.v_img {
  width: 600px;
}
.red {
  color: red;
}
.gre{
  color: #42b983;
}
.padding {
  padding: 30px 0;
}
.v_left_list {
  width: 200px;
  border-right: 1px solid #ccc;
  position: fixed;
  left: 0;

  li {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    a{
      color: #000;
      text-decoration: none
    }
    &.active {
      a {
        color: #42b983;
      }
    }
    &:hover {
       a {
          color: #42b983;
       }
    }
  }
}
.container {
  padding-left: 400px;
}
</style>
